<template>
  <div id="app">
    <span style="margin-left: 500px;">信息统计</span>
    <el-form ref="form"  label-width="120px">      
      <el-form-item label="请选择统计方式" >
        <el-col :span="20">
            <el-select v-model="option"  placeholder="请选择" >
               <el-option label="建筑面积统计" value="1"></el-option>
               <el-option label="建筑区划统计" value="2"></el-option>
               <el-option label="房屋性质" value="3"></el-option>
              
     </el-select>

        </el-col>
      </el-form-item>
    
      <el-form-item label="统计时段">
    <el-col :span="11">
      <el-input v-model="mindate" style="width: 100%;" placeholder=""></el-input>
      
    </el-col>
    <el-col class="line" :span="2" style="margin-left:20px;">至</el-col>
    <el-col :span="10">
        <el-input v-model="maxdate" style="margin-left:-50px;" placeholder=""></el-input>
    </el-col>
    <el-button type="success" @click="count()">开始统计</el-button>
  </el-form-item>

    </el-form>

    <div id="main" style="float:left;width: 600px;height:400px;margin-left:10px;">  
    </div>
    <div id="main2" style="float:left;width: 600px;height:400px;margin-left:10px;">  
    </div>
  </div>
</template>
<script>

export default {
    data(){
        return{
          option:"",
          mindate:"",
          maxdate:"",
           acreagedata:[],
           rowdata:[],
           buildingareadata:[],
           housenumdata:[],
           buildingnumdata:[],
           roomtypedata1:[],  //房屋性质
           roomtypedata2:[],
           acreagedata2:[],

        }
    },
  mounted() {

  },
  methods: {
      
      count(){
        this.acreagedata=[],
           this.rowdata=[],
           this.buildingareadata=[],
           this.housenumdata=[],
           this.buildingnumdata=[],
           this.roomtypedata1=[],  //房屋性质
           this.roomtypedata2=[],
           this.acreagedata2=[],
        this.$echarts.init(document.getElementById("main")).clear();
        this.$echarts.init(document.getElementById("main2")).clear();
        
         var the = this;
          if(this.option==1){
               
                $.ajax({
                    url:"http://localhost:8081/count/buildingacreageCount",
                    type:"post",
                    async: false ,
                    success(response){
                        var list=response.data;
                              for(var i=0;i<list.length;i++){
                                  var s=list[i];
                                  var m=s.zone.zname; 
                                  var l=s.acreage;                            
                                  the.rowdata.push(m);
                                  the.acreagedata.push(l);
                                  
                    }
                    }
                });               
               
                  console.log(this.rowdata);             
                // 基于准备好的dom，初始化echarts实例
                  let myChart = this.$echarts.init(document.getElementById("main"));
                  // 指定图表的配置项和数据
                  let option = {
                      tooltip: {
                              trigger: 'axis',
                              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                              }
                          },
                          grid: {
                              left: '3%',
                              right: '4%',
                              bottom: '3%',
                              containLabel: true
                          },
                          xAxis: [
                              {
                                  type: 'category',
                                  data: this.rowdata,
                                  axisTick: {
                                      alignWithLabel: true
                                  }
                              }
                          ],
                          yAxis: [
                              {
                                  type: 'value'
                              }
                          ],
                          series: [
                              {
                                  name: '直接访问',
                                  type: 'bar',
                                  barWidth: '60%',
                                  data: this.acreagedata
                              }
                          ]
               
                  }
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);                  
             
          }else if(this.option==2){
               $.ajax({
                    url:"http://localhost:8081/count/buildingareaCount",
                    type:"post",
                    async: false ,
                    success(response){
                      console.log(response.data);
                        var list=response.data;
                              for(var i=0;i<list.length;i++){
                                  var s=list[i];
                                  var m=s.buildingarea.bname; 
                                  var l=s.housenum;
                                  var n=s.buildingnum;                            
                                  the.buildingareadata.push(m);
                                  the.housenumdata.push(l);
                                  the.buildingnumdata.push(n);                                  
                    }
                    }
                });               
                
                console.log(this.rowdata);             
                // 基于准备好的dom，初始化echarts实例
                  let myChart = this.$echarts.init(document.getElementById("main"));
                  // 指定图表的配置项和数据
                  let option = {
                       tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        legend: {
            data: ['Growth', '楼盘数量', '楼栋数量'],
            itemGap: 5
        },
        grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: this.buildingareadata,
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量 (个)',
                // axisLabel: {
                //     formatter: function (a) {
                //         a = +a;
                //         return isFinite(a)
                //             ? the.echarts.format().addCommas(+a / 1000)
                //             : '';
                //     }
                // }
            }
        ],
        dataZoom: [
            {
                show: true,
                start: 94,
                end: 100
            },
            {
                type: 'inside',
                start: 94,
                end: 100
            },
            {
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        series: [
            {
                name: '楼盘数量',
                type: 'bar',
                data: this.housenumdata,
            },
            {
                name: '楼栋数量',
                type: 'bar',
                data: this.buildingnumdata
            }
        ]  
                  }     
              myChart.setOption(option);                  
             


          }else if(this.option==3){
               $.ajax({
                    url:"http://localhost:8081/count/houseProperty",
                    type:"post",
                    async: false ,
                    success(response){
                      console.log(response.data);
                      console.log("------------");
                      var list=response.data;
                              for(var i=0;i<list.length;i++){
                                  var s=list[i];
                                  var m=s.roomtype.rname; 
                                  var l=s.count;
                                  var n=s.acreage;                           
                                  the.roomtypedata1.push({value:l,name:m});
                                  the.roomtypedata2.push({value:n,name:m});
                                                           
                    }
                    }
                });               
                
                            
                // 基于准备好的dom，初始化echarts实例
                  var myChart;
                  
                  myChart = this.$echarts.init(document.getElementById("main"));
                  // 指定图表的配置项和数据
                  let option = {
                        title: {
                        text: '房屋性质',
                        subtext: '房屋数量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '房屋数量',
                            type: 'pie',
                            radius: '50%',
                            data: this.roomtypedata1,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                  }     
              myChart.setOption(option,false); 
              
              




             var myChart2;
                 
            myChart2 = this.$echarts.init(document.getElementById("main2"));
                  // 指定图表的配置项和数据
            let option2 = {
                        title: {
                        text: '房屋性质',
                        subtext: '房屋面积',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '房屋面积',
                            type: 'pie',
                            radius: '50%',
                            data: this.roomtypedata2,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                  }     
              myChart2.setOption(option2,false); 









             


          }
      }
     
    // drawChart() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(document.getElementById("main"));
    //   // 指定图表的配置项和数据
    //   let option = {
    //         xAxis: {
    //     type: 'category',
    //     data: rowdata(),
    // },
    // yAxis: {
    //     type: 'value'
    // },
    // series:[],
    //   };
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(option);
    // }
  },
 
};
</script>


<style scoped>

</style>

